<!--
 * @Author: licongwei
 * @Date: 2022-03-08 10:24:34
 * @FileDescription: 模块容器
-->
<template>
  <div class="com-box">
    <div class="com-header">
      <!-- <div class="slot-left slot-title-box">
        <slot name="titleLeft"></slot>
      </div> -->
      <h4 class="title">{{ title }}</h4>
      <div class="img" v-if="imgBool" @click="handClick"></div>
      <!-- <div class="slot-right slot-title-box">
        <slot name="titleRight"></slot>
      </div> -->
    </div>
    <div :class="['slot-box', { 'til-box': !Boolean(title) }]">
      <slot></slot>
    </div>
    <div class="bg-con">
      <div class="bg-t"></div>
      <div class="bg-c"></div>
      <div class="bg-b"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'comBox',
  props: {
    title: {
      type: String,
      default: ''
    },
    imgBool: {
      type: Boolean,
      default: false
    },
    rightUnit: {
      type: String,
      default: ''
    },
    leftUnit: {
      type: String,
      default: ''
    }
  },
  setup(props, ctx) {
    const handClick = () => {
      ctx.emit('imgClick')
    }
    return {
      handClick
    }
  }
})
</script>
<style lang="less" scoped>
.com-box {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .com-header {
    // height: 45px;
    height: 63px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    .title {
      // flex: 0 0 264px;
      // padding: 0px 45px;
      z-index: 2;
      font-size: 20px;
      color: #def1ff;
      line-height: 45px;
      text-align: center;
      // background: url('./img/box-title-bg2.png') no-repeat center;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
    }
    .img {
      background: url('./img/sd.png') no-repeat center;
      background-size: 100% 100%;
      width: 27px;
      height: 28px;
      position: absolute;
      z-index: 99;
      left: 50px;
      top: 18px;
      cursor: pointer;
    }
    .slot-title-box {
      z-index: 2;
      height: 100%;
      flex: 1;
    }
  }

  .slot-box {
    position: relative;
    height: calc(100% - 45px);
    z-index: 1;
    overflow: hidden;
  }
  .til-box {
    height: 100% !important;
  }
  .bg-con {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    .bg-t {
      flex: 0 0 60px;
      background: url('./img/box-title-bg2.png') no-repeat center;
      // background: url('./img/con-box-bg-t.png') no-repeat center;
      background-size: 100% 100%;
    }
    .bg-c {
      flex: 1;
      background: url('./img/con-box-bg-c.png');
      background-size: 100% 100%;
    }
    .bg-b {
      // flex: 0 0 70px;
      flex: 0 0 12px;
      background: url('./img/con-box-bg-b2.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
}
</style>
